<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <title>电商管理员后台</title>
    <style>
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            font-family: sans-serif;
            background-color: #f3f4f6;
        }

        /* 顶部提示 */
        .fixed.top-0.left-0.right-0.bg-blue-600.text-white.text-center.py-2.z-10 {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #2563eb;
            color: white;
            text-align: center;
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            z-index: 10;
        }

        .fixed.top-0.left-0.right-0.bg-blue-600.text-white.text-center.py-2.z-10 h1 {
            font-size: 1.25rem;
            font-weight: bold;
        }

        #sidebar {
            width: 20%;
            background-color: #1f2937;
            color: white;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: 3rem;
        }

        #sidebar button {
            padding: 1rem;
            background-color: #374151;
            border-radius: 0.375rem;
            cursor: pointer;
        }

        #sidebar button:hover {
            background-color: #4b5563;
        }

        #content {
            width: 80%;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            margin-top: 3rem;
        }

        .hidden {
            display: none;
        }

        .bg-white.p-8.rounded-md.shadow-md {
            background-color: white;
            padding: 2rem;
            border-radius: 0.375rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        }

        .bg-white.p-8.rounded-md.shadow-md h2 {
            font-size: 1.25rem;
            font-weight: bold;
            color: #1f2937;
            margin-bottom: 1.5rem;
        }

        .block.text-sm.font-medium.text-gray-700.mb-2 {
            display: block;
            font-size: 0.875rem;
            font-weight: 500;
            color: #4b5563;
            margin-bottom: 0.5rem;
        }

        .w-full.p-3.border.border-gray-300.rounded-md.mb-6 {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #d1d5db;
            border-radius: 0.375rem;
            margin-bottom: 1.5rem;
        }

        .p-3.bg-blue-600.text-white.rounded-md.hover:bg-blue-700 {
            padding: 0.75rem;
            background-color: #2563eb;
            color: white;
            border-radius: 0.375rem;
        }

        .p-3.bg-blue-600.text-white.rounded-md.hover:bg-blue-700:hover {
            background-color: #1d4ed8;
        }

        .mt-6.p-4.bg-gray-200.rounded-md {
            margin-top: 1.5rem;
            padding: 1rem;
            background-color: #e5e7eb;
            border-radius: 0.375rem;
        }

        .p-3.bg-red-600.text-white.rounded-md.hover:bg-red-700 {
            padding: 0.75rem;
            background-color: #dc2626;
            color: white;
            border-radius: 0.375rem;
        }

        .p-3.bg-red-600.text-white.rounded-md.hover:bg-red-700:hover {
            background-color: #b91c1c;
        }

        .p-3.bg-yellow-600.text-white.rounded-md.hover:bg-yellow-700 {
            padding: 0.75rem;
            background-color: #d97706;
            color: white;
            border-radius: 0.375rem;
        }

        .p-3.bg-yellow-600.text-white.rounded-md.hover:bg-yellow-700:hover {
            background-color: #b45309;
        }
    </style>
</head>

<body class="flex h-screen m-0 font-sans bg-gray-100">
    <!-- 顶部提示 -->
    <div class="fixed top-0 left-0 right-0 bg-blue-600 text-white text-center py-2 z-10">
        <h1 class="text-xl font-bold">后台管理</h1>
    </div>
    <div id="sidebar" class="w-1/5 bg-gray-800 text-white p-8 flex flex-col gap-6 mt-12">
        <button onclick="showAddProduct()" class="p-4 bg-gray-700 hover:bg-gray-600 rounded-md">增加商品</button>
        <button onclick="showSearchProduct()" class="p-4 bg-gray-700 hover:bg-gray-600 rounded-md">查找商品</button>
        <button onclick="showDeleteProduct()" class="p-4 bg-gray-700 hover:bg-gray-600 rounded-md">删除商品</button>
        <button onclick="showUpdateProduct()" class="p-4 bg-gray-700 hover:bg-gray-600 rounded-md">更改商品信息</button>
    </div>
    <div id="content" class="w-4/5 p-8 flex flex-col gap-8 mt-12">
        <!-- 增加商品界面 -->
        <div id="addProduct" class="hidden bg-white p-8 rounded-md shadow-md">
            <h2 class="text-xl font-bold text-gray-800 mb-6">增加商品</h2>
            <form id="addProductForm" action="/addProduct" method="post">
                <label for="addId" class="block text-sm font-medium text-gray-700 mb-2">ID:</label>
                <input type="text" id="addId" required class="w-full p-3 border border-gray-300 rounded-md mb-6" name="id">
                <label for="addName" class="block text-sm font-medium text-gray-700 mb-2">名称:</label>
                <input type="text" id="addName" required class="w-full p-3 border border-gray-300 rounded-md mb-6" name="name">
                <label for="addPrice" class="block text-sm font-medium text-gray-700 mb-2">价格:</label>
                <input type="number" id="addPrice" required class="w-full p-3 border border-gray-300 rounded-md mb-6" name="price">
                <label for="addDescription" class="block text-sm font-medium text-gray-700 mb-2">描述:</label>
                <input type="text" id="addDescription" required
                    class="w-full p-3 border border-gray-300 rounded-md mb-6" name="description">
                <label for="addCategory" class="block text-sm font-medium text-gray-700 mb-2">类别:</label>
                <input type="text" id="addCategory" required 
                    class="w-full p-3 border border-gray-300 rounded-md mb-6" name="category">
                <button type="submit" class="p-3 bg-blue-600 text-white rounded-md hover:bg-blue-700">提交</button>
            </form>
        </div>
        <!-- 查找商品界面 -->
        <div id="searchProduct" class="hidden bg-white p-8 rounded-md shadow-md">
            <h2 class="text-xl font-bold text-gray-800 mb-6">查找商品</h2>
            <form id="searchProductForm" action="/findProduct" method="post">
                <label for="searchId" class="block text-sm font-medium text-gray-700 mb-2">按 ID 查找:</label>
                <input type="text" id="searchId" class="w-full p-3 border border-gray-300 rounded-md mb-6" name="id">
                <button type="submit" class="p-3 bg-blue-600 text-white rounded-md hover:bg-blue-700">查找</button>
            </form>
            <div id="searchResult" class="mt-6 p-4 bg-gray-200 rounded-md"></div>
        </div>
        <!-- 删除商品界面 -->
        <div id="deleteProduct" class="hidden bg-white p-8 rounded-md shadow-md">
            <h2 class="text-xl font-bold text-gray-800 mb-6">删除商品</h2>
            <form id="deleteProductForm" action="/deleteProduct" method="post">
                <label for="deleteId" class="block text-sm font-medium text-gray-700 mb-2">输入商品 ID:</label>
                <input type="text" id="deleteId" required class="w-full p-3 border border-gray-300 rounded-md mb-6" name="id">
                <button type="submit" class="p-3 bg-red-600 text-white rounded-md hover:bg-red-700">删除</button>
            </form>
        </div>
        <!-- 更改商品信息界面 -->
        <div id="updateProduct" class="hidden bg-white p-8 rounded-md shadow-md">
            <h2 class="text-xl font-bold text-gray-800 mb-6">更改商品信息</h2>
            <form id="updateProductForm" action="/updateProduct" method="post">
                <label for="updateId" class="block text-sm font-medium text-gray-700 mb-2">商品 ID:</label>
                <input type="text" id="updateId" required class="w-full p-3 border border-gray-300 rounded-md mb-6" name="id">
                <label for="updateName" class="block text-sm font-medium text-gray-700 mb-2">新名称:</label>
                <input type="text" id="updateName" class="w-full p-3 border border-gray-300 rounded-md mb-6" name="newname">
                <label for="updatePrice" class="block text-sm font-medium text-gray-700 mb-2">新价格:</label>
                <input type="number" id="updatePrice" class="w-full p-3 border border-gray-300 rounded-md mb-6" name="newprice">
                <label for="updateDescription" class="block text-sm font-medium text-gray-700 mb-2">新描述:</label>
                <input type="text" id="updateDescription" class="w-full p-3 border border-gray-300 rounded-md mb-6" name="newdescription">
                <label for="updateCategory" class="block text-sm font-medium text-gray-700 mb-2">新类别:</label>
                <input type="text" id="updateCategory" class="w-full p-3 border border-gray-300 rounded-md mb-6" name="newcategory">
                <button type="submit" class="p-3 bg-yellow-600 text-white rounded-md hover:bg-yellow-700">更新</button>
            </form>
        </div>
    </div>

    <script>
        function showAddProduct() {
            hideAll();
            document.getElementById('addProduct').classList.remove('hidden');
        }

        function showSearchProduct() {
            hideAll();
            document.getElementById('searchProduct').classList.remove('hidden');
        }

        function showDeleteProduct() {
            hideAll();
            document.getElementById('deleteProduct').classList.remove('hidden');
        }

        function showUpdateProduct() {
            hideAll();
            document.getElementById('updateProduct').classList.remove('hidden');
        }

        function hideAll() {
            const sections = ['addProduct', 'searchProduct', 'deleteProduct', 'updateProduct'];
            sections.forEach(section => {
                document.getElementById(section).classList.add('hidden');
            });
        }
        // // 这里可以添加表单提交的事件处理逻辑
        // document.getElementById('addProductForm').addEventListener('submit', function (e) {
        //     // 处理增加商品逻辑
        //     const id = document.getElementById('addId').value;
        //     const name = document.getElementById('addName').value;
        //     const price = document.getElementById('addPrice').value;
        //     const description = document.getElementById('addDescription').value;
        //     const category = document.getElementById('addCategory').value;
        //     console.log('增加商品:', { id, name, price, description, category });
        // });

        // document.getElementById('searchProductForm').addEventListener('submit', function (e) {
        //     // 处理查找商品逻辑
        //     const id = document.getElementById('searchId').value;
        //     console.log('查找商品 ID:', id);
        //     // 这里可以添加根据 ID 查找商品并显示结果的逻辑
        //     document.getElementById('searchResult').innerHTML = `查找商品 ID: ${id}`;
        // });

        // document.getElementById('deleteProductForm').addEventListener('submit', function (e) {
        //     // 处理删除商品逻辑
        //     const id = document.getElementById('deleteId').value;
        //     console.log('删除商品 ID:', id);
        // });

        // document.getElementById('updateProductForm').addEventListener('submit', function (e) {
        //     // 处理更改商品信息逻辑
        //     const id = document.getElementById('updateId').value;
        //     const name = document.getElementById('updateName').value;
        //     const price = document.getElementById('updatePrice').value;
        //     const description = document.getElementById('updateDescription').value;
        //     const category = document.getElementById('updateCategory').value;
        //     console.log('更改商品信息:', { id, name, price, description, category });
        // });
    </script>
</body>

</html>